<template>
    <view :style="{'--color': color}">
        <status-bar title='代理商中心' :goHome='fromShare'></status-bar>
        <view class="padding30" v-if="list.length">
            <view class="card thmeBg bor_radius_30 p-re white m-bot30" v-for="(item,index) in list" :key="index" 
                @click="toUrl('/joinPage/proxyStore?agent_id=' + item.agent_id)">
                <image :src="imgUrl + 'Uploads/User_img/shadingImg.png'" mode="aspectFill" class="wh p-ab"></image>
                <view class="d-flex j-sb padding30">
                    <view class="size26 bold">{{ item.agent_name }}【{{ item.agent_level }}】</view>
                    <view>查看</view>
                </view>
                <view class="d-flex m-bot30">
                    <view class="text-center w-333">
                        <view class="h7"><text class="size36 m-right4">{{ item.allStoreNum }}</text>个</view>
                        <view>辖区店铺</view>
                    </view>
                    <view class="text-center w-333">
                        <view class="h7"><text class="size36 m-right4">{{ item.allOrderNum }}</text>单</view>
                        <view>辖区总单量</view>
                    </view>
                    <view class="text-center w-333">
                        <view class="h7"><text class="size36 m-right4">{{ item.allOrderMoney }}</text>元</view>
                        <view>辖区总流水</view>
                    </view>
                </view>
                <view class="d-flex j-se">
                    <view class="text-center w-333">
                        <view class="h7"><text class="size36 m-right4">{{ item.mOrderNum }}</text>单</view>
                        <view>上月单量</view>
                    </view>
                    <view class="text-center w-333">
                        <view class="h7"><text class="size36 m-right4">{{ item.mOrderMoney }}</text>元</view>
                        <view>上月流水</view>
                    </view>
                    <view class="text-center w-333" @click.stop="toUrl('/joinPage/cashOut')">
                        <view class="h7"><text class="size36 m-right4">{{ item.mIncome }}</text>元</view>
                        <view class="p-re">上月收益<text class="iconfont icon-a-032 size40 p-ab"></text></view>
                    </view>
                </view>
            </view>
        </view>

        <empty v-if="noData" cat='3' msg='您还没有相关的代理'></empty>

        <showModel type="99" v-if="showModal" title="暂无管理权限" msg="请联系平台获取代理权限" btn2="返回" 
            @cancelFunc="showModal = false" @certain="back()"></showModel>
    </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            fromShare: 0,
            imgUrl: this.imgUrl,
            list: [],
            noData: false,
            showModal: false
        }
    },
    computed: {
        ...mapState(['color','position'])
    },
    onLoad(e){
        if(e.fromShare) this.fromShare = e.fromShare
        if(this.position.longitude == 0) this.$pop.getLocation()
        this.getList()
    },
    methods: {
        getList(){
            this.$http.post({
                url: '/osmxcxApi/getMyAgentList'
            }).then(res=>{
                this.list = res.data.agentList || []
                if(!this.list.length){
                    this.noData = true
                    this.showModal = true
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.card {
    width: 690rpx;
    height: 320rpx;
    box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(0,0,0,0.1);
    image {
        top: 0;
        left: 0;
    }
    .icon-a-032 {
        // right: -40rpx;
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>